<template>
  <!-- 调度申请 -->
  <div class="TripsNumber">
    <div class="table_handle_header">
    </div>

    <div class="table_data_search">
      <el-from :model="searchForm">
        <el-row>
          <el-col :span="3">
            <el-form-item label="车辆" :label-width="40">
              <el-input v-model="searchForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="申请类型" :label-width="100">
              <el-select v-model="searchForm.applyType" default-first-option>
                <el-option v-for="item in applyTypeList" :key="item.label" :value="item.value"
                  :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="处理状态" :label-width="100">
              <el-select v-model="searchForm.handelStaus">
                <el-option v-for="item in handelStauslist" :key="item.label" :value="item.value"
                  :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="时间段" :label-width="80">
              <el-time-picker v-model="searchForm.value1" is-range range-separator="To" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </el-form-item>
          </el-col>
          <el-col :span="5" :push="3">
            <el-button type="primary">搜索</el-button>
          </el-col>

          <el-col :span="8">
            <el-button type="primary">批量同意</el-button>
            <el-button type="primary">批量拒绝</el-button>
          </el-col>

        </el-row>
      </el-from>
    </div>


    <div class="trip_table" v-show="isMerge">
      <div class="table">
        <BasicTable :column="column" :tableData="tableData" :isSelect="true" @select="ChangeSelect" @rowClick="rowClick"
          isRowRight :rightMenu="rightMenu" :isShowSerial="false" :handel="handel">
        </BasicTable>
      </div>
    </div>

  </div>
</template>

<script setup>
import { watch, ref } from 'vue';
import BasicTable from '@/components/BasicTable/BasicTable.vue'
import { getRequestList } from '@/api/dispatch/routeLine.js'



const searchForm = ref({
  applyType: '',
  handelStaus: ''
})
const isMerge = ref(true)
const isSearch = ref(false)
const table_height = ref('356px')
watch(isSearch, () => {
  table_height.value = '356px'
  if (isSearch.value) table_height.value = '306px'
})
const ChangeSelect = (val) => {
  console.log(val, '当前选中的数据');
}
const rowClick = (row) => {
  console.log(row, '点击的当前行的数据');
}



const applyTypeList = ref([
  { label: '全部', value: '' },
  { label: '保养', value: '1' },
  { label: '加油/汽', value: '2' },
  { label: '包车', value: '3' },
  { label: '故障修车', value: '4' },
  { label: '事故', value: '5' },
  { label: '其他', value: '6' },
])
const handelStauslist = ref([
  { label: '全部', value: '' },
  { label: '待处理', value: '1' },
  { label: '通过', value: '2' },
  { label: '拒绝', value: '3' },
])





// 列配置
const column = ref([
  {
    prop: 'plateNo',
    label: '车辆'
  },
  {
    prop: 'driverName',
    label: '司机'
  },
  {
    prop: 'nonOperationType',
    label: '事件类型'
  },
  {
    prop: 'createTime',
    label: '发生时间'
  },
  {
    prop: 'status',
    label: '处理情况'
  },
  // {
  //   prop: '',
  //   label: '操作'
  // },
])
// 右键菜单
const rightMenu = ref([
  {
    content: '查看车辆',
    methods: (e) => {
      console.log(e, '查看车辆');
    },
  },
  {
    content: '修改车辆状态',
    children: [
      {
        content: '在线',
        methods: (e) => {
          console.log(e, '设置在线状态');
        },
      },
      {
        content: '修改离线状态',
        methods: (e) => {
          console.log(e, '设置离线状态');
        },
      }
    ]
  }
])
// 操作
const handel = ref({
  fixed: 'right',
  width: 240,
  label: '操作',
  option: [
    {
      icon: 'icon-gy_shijianbanli2',
      contents: '同意',
      method: (e) => {
        alert('点击了修改', e)
      },
      disabled: (e) => {
        // console.log(e);
        return false
      }
    },
    {
      icon: 'icon-shanchu',
      contents: '拒绝',
      method: (e) => {
        alert('点击了删除', e)
      },
    }
  ]
})
// 表格数据
const tableData = ref([])
const route = useRoute()
onMounted(() => {
  getRequestList(route.query).then(res => {
    console.log('这个是调度申请', res);
    tableData.value = res.data
  })
})

</script>

<style lang="scss" scoped>
@import './assets/black_table.scss';

:deep(.el-checkbox) {
  align-items: normal;
  padding-top: 8px;
}

.trip_table {
  padding: 20px 20px 10px;

  .table {
    height: v-bind(table_height);
  }
}

.table_data_search {
  padding: 0px 20px;
}

.table_handle_header {
  height: 51px;
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>